<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEdit</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">richTextEditRef</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">Theme</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">RichTextEditTheme</span><span class="enumValue">.Snow</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">ContentChanged</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnContentChanged</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">PlaceHolder</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Type your post here...</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">ReadOnly</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>readOnly</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">SubmitOnEnter</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">false</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">EnterPressed</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnSave</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">ToolbarPosition</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Placement</span><span class="enumValue">.Bottom</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Editor</span><span class="htmlTagDelimiter">&gt;</span>My example content<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Editor</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Toolbar</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarGroup</span><span class="htmlTagDelimiter">&gt;</span>
            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarButton</span> <span class="htmlAttributeName">Action</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">RichTextEditAction</span><span class="enumValue">.Bold</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarButton</span> <span class="htmlAttributeName">Action</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">RichTextEditAction</span><span class="enumValue">.Italic</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarSelect</span> <span class="htmlAttributeName">Action</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">RichTextEditAction</span><span class="enumValue">.Size</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarSelectItem</span> <span class="htmlAttributeName">Value</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">small</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarSelectItem</span> <span class="htmlAttributeName">Selected</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">true</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarSelectItem</span> <span class="htmlAttributeName">Value</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">large</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarSelectItem</span> <span class="htmlAttributeName">Value</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">huge</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Very Big<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">RichTextEditToolbarSelectItem</span><span class="htmlTagDelimiter">&gt;</span>
            <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">RichTextEditToolbarSelect</span><span class="htmlTagDelimiter">&gt;</span>
            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarButton</span> <span class="htmlAttributeName">Action</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">RichTextEditAction</span><span class="enumValue">.List</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Value</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">ordered</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarButton</span> <span class="htmlAttributeName">Action</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">RichTextEditAction</span><span class="enumValue">.List</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Value</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">bullet</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">RichTextEditToolbarGroup</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlComment">&lt;!-- Custom toolbar content --&gt;</span>
        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RichTextEditToolbarGroup</span> <span class="htmlAttributeName">Float</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Float</span><span class="enumValue">.Right</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">onClick</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">window.open(&#39;https://www.quilljs.com/&#39;,&#39;quilljs&#39;)</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span><span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Icon</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">IconName</span><span class="enumValue">.InfoCircle</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span><span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnSave</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span><span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Icon</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">IconName</span><span class="enumValue">.Save</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span><span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">RichTextEditToolbarGroup</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Toolbar</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">RichTextEdit</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
<div class="csharp"><pre>
<span class="atSign">&#64;</span>code{
    <span class="keyword">private</span> RichTextEdit richTextEditRef;
    <span class="keyword">private</span> <span class="keyword">bool</span> readOnly;
    <span class="keyword">private</span> <span class="keyword">string</span> contentAsHtml;
    <span class="keyword">private</span> <span class="keyword">string</span> contentAsDeltaJson;
    <span class="keyword">private</span> <span class="keyword">string</span> contentAsText;
    <span class="keyword">private</span> <span class="keyword">string</span> savedContent;

    <span class="keyword">public</span> <span class="keyword">async</span> Task OnContentChanged()
    {
        contentAsHtml = <span class="keyword">await</span> richTextEditRef.GetHtmlAsync();
        contentAsDeltaJson = <span class="keyword">await</span> richTextEditRef.GetDeltaAsync();
        contentAsText = <span class="keyword">await</span> richTextEditRef.GetTextAsync();
    }

    <span class="keyword">public</span> <span class="keyword">async</span> Task OnSave()
    {
        savedContent = <span class="keyword">await</span> richTextEditRef.GetHtmlAsync();
        <span class="keyword">await</span> richTextEditRef.ClearAsync();
    }
}
</pre></div>
</div>
